<template>
  <Drawer :closable="false" :visible="visible" :width="800" title="查看部署任务详情" @close="handleCancel">
    <Descriptions :bordered="false" :column="2" size="middle" title="基本信息">
      <DescriptionsItem label="ID">{{ data.id }}</DescriptionsItem>
      <DescriptionsItem label="应用">{{ data.appName }}</DescriptionsItem>
      <DescriptionsItem label="开始时间">{{ data.startTime }}</DescriptionsItem>
      <DescriptionsItem label="结束时间">{{ data.endTime }}</DescriptionsItem>
      <DescriptionsItem label="状态">{{ statusMap[data.status] }}</DescriptionsItem>
    </Descriptions>
    <Collapse v-model:activeKey="activeKey">
      <CollapsePanel v-for="process in data.taskDtoList" :header="process.name" :key="process.id"
        ><Card>
          <div>任务ID： {{ process.id }}</div>
          <div>开始时间： {{ process.startTime }}</div>
          <div>结束时间： {{ process.endTime }}</div>
          <div>状态： {{ statusMap[process.status] }}</div>
          <div v-if="process.errorMsg">错误信息：</div>
          <div v-if="process.errorMsg" class="bg-black text-white-300 p-10px">
            {{ process.errorMsg }}
          </div>
        </Card>
        <template #extra>
          <CheckCircleFilled
            v-if="process.status === 'CREATED' || process.status === 'COMPLETED'"
            class="text-green-500"
          />
          <PauseCircleFilled v-if="process.status === 'SUSPENDED'" class="text-yellow-500" />
          <LoadingOutlined v-if="process.status === 'RUNNING'" />
          <CloseCircleFilled
            v-if="process.status === 'CANCELLED' || process.status === 'ERRORED'"
            class="text-red-500"
          />
        </template>
      </CollapsePanel>
    </Collapse>
  </Drawer>
</template>

<script lang="ts" setup>
import { Descriptions, DescriptionsItem, Drawer, Collapse, CollapsePanel, Card } from 'ant-design-vue';
import { ref } from 'vue';
import { getJobResult } from '/@/api/deployment-center/deployResult';
import { CheckCircleFilled, PauseCircleFilled, LoadingOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
const visible = ref(false);
const data = ref({ taskDtoList: [] });

const statusMap = {
  CREATED: '创建成功',
  RUNNING: '执行中',
  SUSPENDED: '已暂停',
  CANCELLED: '已取消',
  ERRORED: '执行出错',
  COMPLETED: '已完成',
};
const handleCancel = function () {
  visible.value = false;
};
const activeKey = ref();

// eslint-disable-next-line max-lines-per-function
async function initData(id) {
  try {
    const res = await getJobResult({ id });
    data.value = res;
  } catch {
    data.value = { taskDtoList: [] };
  }
}

async function openDrawer(record: Recordable) {
  visible.value = true;
  await initData(record.id);
  data.value.appName = record.appName;
}

defineExpose({ openDrawer });
</script>
